<script setup lang='ts'>
import { useRoute } from 'vue-router';
import { reactive, ref } from 'vue';
import { deleteD, getadddData, getPage } from '@/api/jishang/SetArticle';
import { ElMessage, FormInstance, UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';
import { getGroup } from '@/api/jishang/SetArticle';
import { ElMessageBox } from 'element-plus';

const route = useRoute();
const data = route.query.articleGroupId;
console.log(data);

interface tableDataType {
    articleId: 0,
    sort: 0,
    videoList: [],
    intro: '',
    contentRich: '',
    groupId: 0,
    'title': '',

}

const tableData = ref<tableDataType[]>([]);
let editData = ref();
const imageUrlPc = ref('');
const nameValidateForm = reactive({
    articleGroupId: 0,
    articleId: 0,
    title: '',
    displaying: 0,
    sort: 0,
    intro: '',
    videoList: [],
    groupId: data
});
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
let detail = ref();

function handleClick(edit) {
    console.log(edit);
    editData.value = edit;
    detail.value = edit.row.contentRich;
    nameValidateForm.articleId = edit.row.articleId;
    nameValidateForm.intro = edit.row.intro;
    nameValidateForm.title = edit.row.title;
    imageUrlPc.value = edit.row.mainPic;
    nameValidateForm.sort = edit.row.sort;
}

// 重置
function reset(){
    tableData.value.length = 0;
    getPage(data).then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);
            console.log(tableData.value);
        });
    });
}

//渲染
getPage(data).then(res => {
    console.log(res);
    (res as any).rows.map((item: any) => {
        tableData.value.push(item);
        console.log(tableData.value);

    });
});
//编辑
// const handleAvatarSuccessPc: UploadProps['onSuccess'] = (
//     response
// ) => {
//     imageUrlPc.value = response.fileName;
// };
// const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
//     if (rawFile.type !== 'image/jpeg') {
//         ElMessage.error('Avatar picture must be JPG format!');
//         return false;
//     } else if (rawFile.size / 1024 / 1024 > 2) {
//         ElMessage.error('Avatar picture size can not exceed 2MB!');
//         return false;
//     }
//     return true;
// };
// let headers = reactive({ 'Authorization': 'Bearer ' + getToken() });
const open2 = () => {
    // dialogFormVisible.value = false;
    ElMessage({
        message: '修改成功',
        type: 'success'
    });
};
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!');
            open2;
            changeEnter();
            setTimeout(function(){
                reset();
            },100);
            dialogFormVisible.value = false;
        } else {
            console.log('error submit!');
            return false;
        }
    });
};
const submitForm1 = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!');
            open2();
            addEnter();
            dialogFormVisible1.value = false;
            setTimeout(function(){
                reset();
            },100);

        } else {
            console.log('error submit!');
            return false;
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    dialogFormVisible.value = false;
};
const formRef = ref<FormInstance>();
let showParams = ref({
    articleId: 0,
    title: '',
    sort: 0
    // contentRich: ''
});

function changeEnter() {
    showParams.value.title = nameValidateForm.title;
    showParams.value.articleId = nameValidateForm.articleId;
    showParams.value.sort = nameValidateForm.sort;
    // showParams.value.contentRich = detail.value;
    console.log(editData.value);
    console.log(showParams.value);
    getGroup(showParams.value).then(res => {
        console.log(res);
    });
}

//删除

//新建
let addcontentRich = ref();
const nameValidateForm1 = reactive({
    title: '',
    sort: 0,
    intro: '',
    groupId: data,
    contentRich: ''
});
let adddData = ref({
    title: '',
    sort: 0,
    intro: '',
    groupId: 0,
    contentRich: '',
    videoList  :[],
});


function add() {
    dialogFormVisible1.value = true;
}
function addEnter() {
    dialogFormVisible.value = false
    adddData.value.title = nameValidateForm1.title;
    adddData.value.sort = Number(nameValidateForm1.sort);
    adddData.value.intro = nameValidateForm1.intro;
    adddData.value.contentRich = addcontentRich.value;
    adddData.value.groupId =  nameValidateForm1.groupId;
    adddData.value.videoList = [];
    getadddData(adddData.value).then(res => {
        console.log(res);
    });
    console.log(adddData.value);
}

//删除
const open = () => {
    ElMessageBox.confirm(
        '此操作将会永久删除该数据，是否确认删除?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            enterDelete();
            setTimeout(function(){
                reset();
            },100);
            ElMessage({
                type: 'success',
                message: '删除成功'
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除'
            });
        });
};
let articleIdList = ref();
function deletegroupId(tableDataEdit){
    console.log(tableDataEdit);
    articleIdList = tableDataEdit.row.articleId;
    console.log(articleIdList);
}
function enterDelete(){

    deleteD(articleIdList).then(res =>{
        console.log(res);
    });
}


</script>

<template>
    <div>
        <el-button type='primary' style='margin: 20px' @click='add'>新增+</el-button>
        <el-table :data='tableData' style='width: 90%;margin: auto;text-align: center'>
            <el-table-column fixed prop='title' label='名称'  />
            <el-table-column fixed prop='intro' label='详情'  />
            <el-table-column prop='sort' label='排序' />
            <el-table-column fixed='right' label='操作' >
                <template #default=tableDataEdit>
                    <el-button link type='primary' size='small'
                               @click='handleClick(tableDataEdit);dialogFormVisible = true'>
                        编辑
                    </el-button>
                    <el-button @click='open() ;deletegroupId(tableDataEdit) ' link type='primary' size='small'>
                        删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <!--    编辑-->
        <el-dialog v-model='dialogFormVisible' title='编辑' width='700'>
            <el-form
                ref='formRef'
                style='max-width: 600px'
                :model='nameValidateForm'
                label-width='auto'
                class='demo-ruleForm'
            >
                <el-form-item
                    label='名称'
                    prop='title'
                    :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                    <el-input
                        v-model.string='nameValidateForm.title'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item
                    label='排序'
                    prop='sort'
                    :rules="[
        { required: true, message: '请输入排序' },

                 ]">

                    <el-input
                        v-model.string='nameValidateForm.sort'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item
                    label='简介'
                    prop='intro'
                    :rules="[
        { required: true, message: '请输入简介' },
        { type: 'string', message: '请输入' },
                 ]">
                    <el-input
                        v-model.string='nameValidateForm.intro'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <p>详情</p>
                <el-form-item style='margin-left: 80px ;width: 520px'>
                    <editor v-model='detail' />
                </el-form-item>
                <!--            <el-form-item-->
                <!--                label='封面图'-->
                <!--                prop='mainPic'-->
                <!--                :rules="[-->
                <!--        { required: false, message: '请上传图像' },-->
                <!--        { type: 'string', message: '请输入' },-->
                <!--                 ]"-->
                <!--            >-->
                <!--                <el-upload-->
                <!--                    class='avatar-uploader'-->
                <!--                    action='/dev-api/common/upload'-->
                <!--                    :show-file-list='false'-->
                <!--                    :on-success='handleAvatarSuccessPc'-->
                <!--                    :before-upload='beforeAvatarUpload'-->
                <!--                    :headers='headers'-->
                <!--                >-->
                <!--                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'-->
                <!--                         style='width: 200px;height: 200px' />-->
                <!--                    <el-icon v-else class='avatar-uploader-icon'>-->
                <!--                        <Plus />-->
                <!--                    </el-icon>-->
                <!--                </el-upload>-->
                <!--            </el-form-item>-->

                <!--            <el-form-item-->
                <!--                label='移动端轮播图'-->
                <!--                prop='mien'-->
                <!--                :rules="[-->
                <!--        { required: false, message: '请上传图像' },-->
                <!--        { type: 'string', message: '请输入' },-->
                <!--                 ]"-->
                <!--            >-->
                <!--                <el-upload-->
                <!--                    class='avatar-uploader'-->
                <!--                    action='/dev-api/common/upload'-->
                <!--                    :show-file-list='false'-->
                <!--                    :on-success='handleAvatarSuccess'-->
                <!--                    :before-upload='beforeAvatarUpload'-->
                <!--                    :headers='headers'-->
                <!--                >-->
                <!--                    <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar'-->
                <!--                         style='width: 200px;height: 200px' />-->
                <!--                    <el-icon v-else class='avatar-uploader-icon'>-->

                <!--                        <Plus />-->
                <!--                    </el-icon>-->
                <!--                </el-upload>-->
                <!--            </el-form-item>-->

                <el-form-item style='width: 200px;margin-left: 500px'>
                    <el-button type='primary' @click=' submitForm(formRef);'>确认</el-button>
                    <el-button @click='resetForm(formRef);dialogFormVisible = false;'>取消</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>
        <el-dialog v-model='dialogFormVisible1 ' title='新建' width='700'>
            <el-form
                ref='formRef'
                style='max-width: 600px'
                :model='nameValidateForm1'
                label-width='auto'
                class='demo-ruleForm'
            >
                <el-form-item
                    label='标题'
                    prop='title'
                    :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                    <el-input
                        v-model.string='nameValidateForm1.title'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item
                    label='排序'
                    prop='sort'
                    :rules="[
        { required: true, message: '请输入排序' },

                 ]">

                    <el-input
                        v-model.string='nameValidateForm1.sort'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <el-form-item
                    label='简介'
                    prop='intro'
                    :rules="[
        { required: true, message: '请输入简介' },
        { type: 'string', message: '请输入' },
                 ]">
                    <el-input
                        v-model.string='nameValidateForm1.intro'
                        type='text'
                        autocomplete='off'
                    />
                </el-form-item>
                <p>详情</p>
                <el-form-item style='margin-left: 80px ;width: 520px'>
                    <editor v-model='addcontentRich' />
                </el-form-item>
                <!--            <el-form-item-->
                <!--                label='封面图'-->
                <!--                prop='mainPic'-->
                <!--                :rules="[-->
                <!--        { required: false, message: '请上传图像' },-->
                <!--        { type: 'string', message: '请输入' },-->
                <!--                 ]"-->
                <!--            >-->
                <!--                <el-upload-->
                <!--                    class='avatar-uploader'-->
                <!--                    action='/dev-api/common/upload'-->
                <!--                    :show-file-list='false'-->
                <!--                    :on-success='handleAvatarSuccessPc'-->
                <!--                    :before-upload='beforeAvatarUpload'-->
                <!--                    :headers='headers'-->
                <!--                >-->
                <!--                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'-->
                <!--                         style='width: 200px;height: 200px' />-->
                <!--                    <el-icon v-else class='avatar-uploader-icon'>-->
                <!--                        <Plus />-->
                <!--                    </el-icon>-->
                <!--                </el-upload>-->
                <!--            </el-form-item>-->

                <!--            <el-form-item-->
                <!--                label='移动端轮播图'-->
                <!--                prop='mien'-->
                <!--                :rules="[-->
                <!--        { required: false, message: '请上传图像' },-->
                <!--        { type: 'string', message: '请输入' },-->
                <!--                 ]"-->
                <!--            >-->
                <!--                <el-upload-->
                <!--                    class='avatar-uploader'-->
                <!--                    action='/dev-api/common/upload'-->
                <!--                    :show-file-list='false'-->
                <!--                    :on-success='handleAvatarSuccess'-->
                <!--                    :before-upload='beforeAvatarUpload'-->
                <!--                    :headers='headers'-->
                <!--                >-->
                <!--                    <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar'-->
                <!--                         style='width: 200px;height: 200px' />-->
                <!--                    <el-icon v-else class='avatar-uploader-icon'>-->

                <!--                        <Plus />-->
                <!--                    </el-icon>-->
                <!--                </el-upload>-->
                <!--            </el-form-item>-->

                <el-form-item style='width: 200px;margin-left: 500px'>
                    <el-button type='primary' @click=' submitForm1(formRef); '>确认</el-button>
                    <el-button @click='resetForm(formRef);  dialogFormVisible1 = false;'>取消</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>
    </div>
</template>

<style scoped>
img{
    display: inline-block;
}

/deep/ .cell {
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
